/**
 * 实现基本拖拽 将左边区域的数据拖拽至右边的区域
 */
import React, { Component } from 'react';
import { DragDropContextProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import DropSource from './DropSource';
import DropTargetElement from './DropTarget';

/*
 * 使用provider包裹拖拽元素以及拖拽目标区域
 */
export default class Demo extends Component {
  render() {
    return (
      <DragDropContextProvider backend={HTML5Backend}>
        <div style={{ display: 'flex' }}>
          {/* 要拖动的组件 */}
          <DropSource />
          {/* 接受拖动的组件 */}
          <DropTargetElement />
        </div>
      </DragDropContextProvider>
    );
  }
}
